<template>
  <div>
    <div id="container" class="aside-float aside-bright" :class="pageClass" :style="pageStyle">
      <!--NAVBAR-->
      <!--===================================================-->
      <nav-header></nav-header>
      <!--===================================================-->
      <!--END NAVBAR-->
      <div class="boxed">
        <!--CONTENT CONTAINER-->
        <!--===================================================-->
        <div id="content-container">
          <div id="page-title" class="dom-title">
            <h1 class="page-header text-overflow">{{pageName}}</h1>
            <!--Searchbox-->
            <div class="searchbox">
              <div class="input-group custom-search-form">
                <span class="input-group-btn">
                  <el-breadcrumb class="pull-right" separator="/">
                    <el-breadcrumb-item :to="{ name:'home' }">
                      <i class="demo-pli-location-2"></i> 主页
                    </el-breadcrumb-item>
                    <el-breadcrumb-item :to="{name:nav.name}" v-if="nav.name != 'app'" v-for="nav in navArr" :key="nav.name">{{nav.meta.pagename}}</el-breadcrumb-item>
                  </el-breadcrumb>
                </span>
              </div>
            </div>
          </div>
          <keep-alive>
            <router-view v-on:API-ERR="API_ERR_NOTIFY"></router-view>
          </keep-alive>
        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->
        <!--ASIDE-->
        <!--===================================================-->
        <aside-right></aside-right>
        <!--===================================================-->
        <!--END ASIDE-->
        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav-left></nav-left>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->
      </div>
      <!-- FOOTER -->
      <div style="height: 50px;"></div>
      <!--===================================================-->
      <lay-footer></lay-footer>
      <!--===================================================-->
      <!-- END FOOTER -->
      <!--===================================================-->
      <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
      </button>
      <!--===================================================-->
    </div>
    <!--===================================================-->
    <!-- END OF CONTAINER -->
    <!-- SETTINGS - DEMO PURPOSE ONLY -->
    <!--===================================================-->
    <demo-set></demo-set>
    <!--===================================================-->
    <!-- END SETTINGS -->
  </div>
</template>
<script>
//头部
import navHeader from './header.vue'
//尾部
import layFooter from './footer.vue'
//左侧菜单栏
import navLeft from './navLeft.vue'
//右侧信息栏
import asideRight from './asideRight.vue'
//样式布局
import demoSet from './demoSet.vue'
export default {
  data: function() {
    return {
      navArr: [],
      pageName: '',
      pageClass: '',
      pageStyle: '',
      time: ''
    }
  },
  created: function() {
    //设置当前页面标题名称
    document.title = this.pageName = this.$route.meta.pagename;
    //根据路由，生成面包屑导航数据
    this.navArr = this.$route.matched;
    //如果用户设置的皮肤，则读取
    var settings = this.$store.state.settings;

    if (settings.skin) {
      $('#theme').attr('href', settings.skin)
    }

    //判断是否开启盒子布局
    if (settings.layout.boxLayout.status) {
      this.pageClass = this.pageClass + ' boxed-layout';
      //判断是否显示盒子背景图片
      if (settings.layout.boxLayout.bgimg) {
        this.pageStyle = {
          'background-image': 'url(' + settings.layout.boxLayout.bgimg + ')',
          'background-repeat': 'no-repeat',
          'background-size': 'cover'
        }
      }

    }

    if (settings.layout.animate.status) {
      this.pageClass = this.pageClass + ' effect'
    }
    var fixed = settings.layout.fixed
    if (fixed.header) {
      this.pageClass = this.pageClass + ' navbar-fixed'
    }
    if (fixed.footer) {
      this.pageClass = this.pageClass + ' footer-fixed'
    }
    if (fixed.slider) {
      this.pageClass = this.pageClass + ' mainnav-fixed'
    }

    if (settings.slider.menu) {
      this.pageClass = this.pageClass + ' mainnav-sm'
    } else {
      this.pageClass = this.pageClass + ' mainnav-lg'
    }
  },
  watch: {
    '$route': function(to, from) {
      this.navArr = this.$route.matched;
      //监听路由，当路由发生改变时，变更当前页面名称
      document.title = this.pageName = to.meta.pagename;
    }
  },
  methods: {
    //监听回调接口请求失败后的方法
    API_ERR_NOTIFY() {
      this.$notify.error(this.$store.state.API_Err_Info);
    }
  },
  components: {
    navHeader,
    layFooter,
    navLeft,
    asideRight,
    demoSet
  }
}

</script>
<style>
#content-container {
  padding-bottom: 0px;
}

.margin-200 {
  margin: 20px;
}

</style>
